<template>
  <div>
    <!-- <el-image
      style="width: 100px; height: 100px"
      src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
      fit="fill"
    ></el-image> -->
    <!-- <el-carousel
      class="carousel"
      height="400px"
      width="400px"
      direction="vertical"
      :autoplay="true"
    >
      <el-carousel-item v-for="item in swiperInfo" :key="item.name">
        <el-image
          style="width: 400px; height: 400px"
          :src="item.img"
          fit="fill"
        ></el-image>
        <h3 class="medium">{{ item.name }}</h3>
      </el-carousel-item>
    </el-carousel> -->

    <el-carousel :interval="4000" type="card" height="240px">
      <el-carousel-item v-for="(item, index) in swiperInfo" :key="item.name">
        <div class="medium" @click="gotoDetails(item.bookId)">
          <img
            class="swipeImg"
            :src="`${url}` + `${item.coverPhoto}`"
            width="100%"
            height="180px"
          />
          <div class="swipeText">{{ item.bookName }}</div>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import { toDetails } from "@/assets/myjs/function.js";

export default {
  data() {
    return {
      swiperInfo: [],
      url: localStorage.getItem("url"),
    };
  },
  created() {
    this.$axios.get("index/sys/book/getSwiper").then((res) => {
      if (res.status == 200) {
        this.swiperInfo = res.data.swiperList;
      }
    });
  },
  methods: {
    gotoDetails(bookId) {
      console.log("click", bookId);
      const _this = this;
      toDetails(_this, bookId);
    },
  },
};
</script>

<style>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}
.carousel {
  width: 100%;
}

.swipeText {
  font-family: font5;
  font-size: 25px;
  text-align: center;
}
</style>